<template>
  <div class="upload-bank">
    <a-layout id="components-layout-demo-fixed">
      <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
        <div class="logo">
          <img src="~assets/img/logo.png" alt="" />
        </div>
      </a-layout-header>
      <a-layout-content :style="{ padding: '0 50px', marginTop: '64px' }">
        <a-breadcrumb :style="{ margin: '16px 0' }">
          <a-breadcrumb-item>求职小助手-后台管理系统</a-breadcrumb-item>
          <a-breadcrumb-item @click.native="backPage" class="back"
            >题库管理</a-breadcrumb-item
          >
          <a-breadcrumb-item>上传题库</a-breadcrumb-item>
        </a-breadcrumb>
        <div
          :style="{
            background: '#fff',
            padding: '40px',
            minHeight: 'calc(100vh - 65px)',
          }"
        >
          <el-form
            :model="bankForm"
            ref="bankForm"
            label-width="70px"
            class="bankForm"
          >
            <!--标题-->
            <div class="title">
              <el-form-item label="标题" prop="tag">
                <el-input
                  type="textarea"
                  v-model="bankForm.tag"
                  placeholder="请输入题库标题"
                  :rows="2"
                ></el-input>
              </el-form-item>
            </div>
            <!-- 描述 -->
            <div class="description">
              <el-form-item label="题库描述" prop="description">
                <el-input
                  type="textarea"
                  v-model="bankForm.description"
                  placeholder="请输入题库相关描述"
                  :rows="3"
                ></el-input>
              </el-form-item>
            </div>
            <!-- 问题 -->
            <div class="QAs">
              <div
                class="QA"
                v-for="QAIndex in bankForm.list.length"
                :key="QAIndex"
              >
                <el-form-item :label="'问题' + QAIndex" prop="question">
                  <el-input
                    type="textarea"
                    v-model="bankForm.list[QAIndex - 1].question"
                    :rows="2"
                    placeholder="请输入问题"
                  ></el-input>
                </el-form-item>

                <el-form-item :label="'回答' + QAIndex" prop="answer">
                  <el-input
                    type="textarea"
                    v-model="bankForm.list[QAIndex - 1].answer"
                    :rows="2"
                    placeholder="请输入答案"
                  ></el-input>
                </el-form-item>
                <span
                  class="el-icon-delete"
                  title="删除此问题"
                  @click="delQA(QAIndex)"
                ></span>
              </div>
              <div class="addQA">
                <el-button type="text" class="add" @click="addQA"></el-button>
              </div>
            </div>

            <!--发布-->
            <div class="go_publish">
              <el-form-item>
                <el-button type="primary" @click="submitForm('bankForm')"
                  >上传</el-button
                >
              </el-form-item>
            </div>
          </el-form>
        </div>
      </a-layout-content>
      <a-layout-footer :style="{ textAlign: 'center' }">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script>
import { addBank } from "../../network/bank";
export default {
  name: "UploadBank",
  components: {},
  data() {
    return {
      bankForm: {
        tag: "",
        description: "",
        list: [
          {
            question: "",
            answer: "",
          },
        ],
      },
    };
  },
  methods: {
    backPage() {
      this.$router.push({ path: "/main/bankManage" });
    },
    addQA() {
      const obj = {
        question: "",
        answer: "",
      };
      this.bankForm.list.push(obj);
    },
    delQA(index) {
      const self = this;
      this.$confirm({
        title: "删除问题",
        content: "删除此问题，是否确定",
        okText: "确认",
        cancelText: "取消",
        onOk() {
          self.bankForm.list.splice(index - 1, 1);
          self.$message.success("已成功删除");
        },
        onCancel() {},
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.bankForm);
          addBank(this.bankForm).then((res) => {
            if (res.data.code === 200) {
              console.log(res);
              this.$message.success("添加题库成功");
              // 跳转到题库管理页面
              this.$router.push({ path: "/main/bankManage" });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
#components-layout-demo-fixed .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 24px 16px 0;
  float: left;
  text-align: center;
  line-height: 31px;
  img {
    width: 58px;
    height: 20px;
  }
}

/deep/.bankForm .el-form-item {
  width: 950px;
}

.title,
.description,
.QAs {
  width: 1000px;
  margin: 0 auto;
}

.QA {
  position: relative;
}

.QA .el-icon-delete {
  position: absolute;
  top: 18px;
  right: 20px;
  font-size: 16px;
  color: #8f9395;
}

.QA .el-icon-delete:hover {
  cursor: pointer;
  color: #002766;
}

.add {
  position: relative;
  width: 120px;
  height: 35px;
  margin: 0 25px 25px;
  background-color: #3f579e;
  border: 1px solid #eeeeee;
}

.add::before {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 25px;
  margin-left: -13px;
  margin-top: -1px;
  border-top: 2px solid #eee;
  content: "";
}

.add::after {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 26px;
  margin-left: -1px;
  margin-top: -13px;
  border-left: 2px solid #eee;
  content: "";
}

.go_publish {
  width: 1000px;
  margin: 0 auto;
}

.el-button--primary {
  background-color: #4361a7;
  border-color: #4361a7;
  color: #fff;
}

.el-button--primary:hover {
  background-color: #5177ce;
  border-color: #5177ce;
  color: #fff;
}

.back {
  cursor: pointer;
  &:hover {
    color: #041527;
  }
}
</style>
